<template>
  <view class="">
    <u-swiper keyName="image" :list="bannerList" indicator height="170" img-mode="scaleToFill" @click="swiperClick"></u-swiper>
    <view class="con">
      <u-form labelPosition="left" :model="formData" label-width="88" :rules="rules" ref="form">
        <view class="commonBox">
          <u-form-item label="工厂名称" prop="name" borderBottom>
            <u-input v-model="formData.name" :disabled="disabled" border="none" placeholder="请输入工厂名称" input-align="right"> </u-input>
          </u-form-item>
          <u-form-item label="联系人姓名" prop="contactName" borderBottom>
            <u-input v-model="formData.contactName" :disabled="disabled" border="none" placeholder="请输入姓名" input-align="right"> </u-input>
          </u-form-item>
          <u-form-item label="联系人手机" prop="contactMobile">
            <u-input v-model="formData.contactMobile" :disabled="disabled" border="none" placeholder="请输入手机号" input-align="right"></u-input>
          </u-form-item>
        </view>
        <view class="commonBox">
          <u-form-item label="工厂地址" prop="address" borderBottom>
            <u-input border="none" placeholder="请输入地址" :disabled="disabled" v-model="formData.address" input-align="right"> </u-input>
          </u-form-item>
          <u-form-item label="工厂规模" prop="peopleCountCN" @click="showPCFN">
            <u-input v-model="formData.peopleCountCN" border="none" readonly placeholder="请选择" input-align="right">
              <template #suffix> <u-icon name="arrow-right" color="#e5e5e5"></u-icon> </template>
            </u-input>
            <u-action-sheet :show="showPeopleCount" :actions="peopleCountList" :closeOnClickAction="true" title="请选择工厂规模" @close="showPeopleCount = false" @select="peopleCountSelect">
            </u-action-sheet>
          </u-form-item>
        </view>
        <view class="commonBox" style="padding-bottom: 20rpx">
          <view class="ywjs">
            <u-form-item label="营业执照" prop="licensePic" @click="uploadImgClick('licensePic')">
              <view v-if="!formData.licensePic" class="yyzzBox"> + </view>
              <image v-else class="licensePic" :src="formData.licensePic" mode="scaleToFill" />
            </u-form-item>
          </view>
        </view>
        <view class="commonBox" style="padding-bottom: 20rpx">
          <view class="ywjs">
            <u-form-item label="公司简介" prop="introduction">
              <u-input placeholder="输入内容" v-model="formData.introduction" :disabled="disabled" maxlength="200" border="bottom"> </u-input>
            </u-form-item>
          </view>
          <view class="ywjs">
            <u-form-item label="行业" border-bottom>
              <view class="hyTetx" @click="goHYPage">
                <text>
                  {{ getIndustryValue() }}
                </text>
                <u-icon name="arrow-right"></u-icon>
              </view>
            </u-form-item>
          </view>
          <view class="ywjs">
            <u-form-item label="公司照片">
              <view class="scBox">
                <template v-if="formData.fileList.length > 0">
                  <view class="box closeBox" v-for="(item, index) in formData.fileList" :key="index">
                    <image :src="item?.url" mode=""></image>
                    <view class="icon" @click="deleteFn(index)">
                      <u-icon name="close"></u-icon>
                    </view>
                  </view>
                </template>
                <view class="box" @click="uploadImgClick('fileList')">
                  <u-icon name="plus" color="#C9CDD8" size="30"></u-icon>
                </view>
              </view>
            </u-form-item>
          </view>

          <view class="msgLeft">
            <u-form-item label="主营业务" prop="mainBusiness">
              <u-input placeholder="输入内容" :disabled="disabled" v-model="formData.mainBusiness" border="none"> </u-input>
            </u-form-item>
          </view>
        </view>
      </u-form>
      <view class="buttomBox" v-if="!disabled">
        <u-button @click="submit" shape="circle" text="提交" color="#1676fd"></u-button>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { getByType } from "@/api/my";
import { goPage } from "@/utils/commonFn";
import { BASE_UPLOADURL } from "@/utils/request";
import { usePostStore } from "@/stores/post";
//@ts-ignore
import { onShow } from "@dcloudio/uni-app";
import { applyFactory, getInfoFactory, modifyFactory } from "@/api/home";
const bannerList = ref();
const { id } = defineProps<{
  id: string;
}>();
const disabled = ref(false);
onMounted(async () => {
  const res = await getByType({ type: "4" });
  bannerList.value = res.data;
  if (id) {
    const res1 = await getInfoFactory({ factoryId: id });
    formData.value = res1.data;
    formData.value.peopleCountCN = peopleCountList.value.filter((i) => i.value === res1.data.peopleCount)[0].name;
    if (res1.data.status !== "3") {
      disabled.value = true;
    }
  }
});
onShow(() => {
  formData.value.industryList = usePostStore().selectIndustry as any;
});
const swiperClick = (e: number) => {
  goPage(`/pages/message/newsDetails?id=${bannerList.value[e].id}`);
};
const getIndustryValue = () => {
  if (formData.value.industryList.length > 0) {
    return formData.value.industryList.map((item: any) => item.industryName).join("、");
  } else {
    return "请选择";
  }
};
const peopleCountList = ref([
  {
    name: "0-20人",
    value: "1",
  },
  {
    name: "20-99人",
    value: "2",
  },
  {
    name: "100-499人",
    value: "3",
  },
  {
    name: "500-999人",
    value: "4",
  },
  {
    name: "1000-9999人",
    value: "5",
  },
  {
    name: "10000人以上",
    value: "6",
  },
]);
const showPeopleCount = ref(false);

const formData = ref<any>({
  name: "",
  contactName: "",
  contactMobile: "",
  address: "",
  licensePic: "",
  introduction: "",
  mainBusiness: "",
  peopleCount: "",
  peopleCountCN: "",
  fileList: [],
  industryList: [],
  id: "",
});
const form = ref();
const rules = ref({
  name: {
    type: "string",
    required: true,
    message: "请填写姓名",
    trigger: ["change", "blur"],
  },
  contactName: {
    type: "string",
    required: true,
    message: "请填写联系人姓名",
    trigger: ["change", "blur"],
  },
  contactMobile: [
    {
      required: true,
      message: "请输入联系人手机号",
      trigger: ["change", "blur"],
    },
    {
      validator: (rule: any, value: string) => {
        //@ts-ignore
        return uni.$u.test.mobile(value);
      },
      message: "手机号码格式不正确",
      trigger: ["change", "blur"],
    },
  ],
  address: {
    type: "string",
    required: true,
    message: "请填写地址",
    trigger: ["change", "blur"],
  },
  licensePic: {
    type: "string",
    required: true,
    message: "请上传营业执照",
    trigger: ["change", "blur"],
  },
  introduction: {
    type: "string",
    required: true,
    message: "请填写工厂描述",
    trigger: ["change", "blur"],
  },
  mainBusiness: {
    type: "string",
    required: true,
    message: "请填写主营业务",
    trigger: ["change", "blur"],
  },
  peopleCountCN: {
    type: "string",
    required: true,
    message: "请选择工厂规模",
    trigger: ["change", "blur"],
  },
  industryList: {
    type: "string",
    required: true,
    message: "请选择行业",
    trigger: ["change", "blur"],
  },
});
const peopleCountSelect = (e: any) => {
  formData.value.peopleCount = e.value;
  formData.value.peopleCountCN = e.name;
  form.value.validateField("peopleCountCN");
};
const showPCFN = () => {
  if (!disabled.value) {
    showPeopleCount.value = true;
  }
};
const goHYPage = () => {
  if (!disabled.value) {
    goPage("/pages/myPage/myIndustry?otherPage=1");
  }
};
const currentUploadImg = ref();
const uploadImgClick = async (text: string) => {
  if (!disabled.value) {
    currentUploadImg.value = text;
    uploadImg();
  }
};
const uploadImg = () => {
  uni.chooseImage({
    count: 9, //默认9
    sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
    sourceType: ["album", "camera"], //从相册选择或者打开相机
    success: function (res) {
      let tempFilePaths = res.tempFilePaths;
      for (let i = 0, len = tempFilePaths.length; i < len; i++) {
        uni.uploadFile({
          url: BASE_UPLOADURL, //仅为示例，非真实的接口地址
          filePath: tempFilePaths[i],
          name: "file",
          header: {
            Authorization: uni.getStorageSync("token"),
          },
          success: (uploadFileRes) => {
            if (currentUploadImg.value === "licensePic") {
              formData.value.licensePic = JSON.parse(uploadFileRes.data).data;
            } else {
              //@ts-ignore
              formData.value.fileList.push({ url: JSON.parse(uploadFileRes.data).data });
            }
          },
        });
      }
    },
  });
};
const deleteFn = (index: number) => {
  formData.value.fileList.splice(index, 1);
};
const submit = () => {
  form.value.validate().then(async () => {
    let text = "";
    if (formData.value?.id) {
      await modifyFactory(formData.value);
      text = "修改成功";
    } else {
      await applyFactory(formData.value);
      text = "提交成功";
    }
    uni.showToast({
      title: text,
      icon: "success",
      complete() {
        setTimeout(() => {
          uni.navigateBack();
        }, 1000);
      },
    });
  });
};
</script>

<style lang="less" scoped>
.banner {
  width: 100%;
  height: 368rpx;
}
.commonBox {
  padding-top: 0rpx;
  padding-bottom: 0rpx;
}
.con {
  padding-bottom: 120rpx;
}
/deep/.u-input {
  padding: 14rpx 0px !important;
}
/deep/ .u-line {
  border-color: #f7f7f7 !important;
}
.yyzzBox {
  height: 320rpx;
  background: #f8f7f6;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 80rpx;
  color: #b3b4b4;
  margin-top: 18rpx;
}
.licensePic {
  width: 100%;
  height: 320rpx;
  margin-top: 20rpx;
}
/deep/ .u-border-bottom {
  border-color: #f7f7f7 !important;
}
.scBox {
  display: flex;
  flex-wrap: wrap;
  background: #fff;
  margin-top: 10rpx;
  border-radius: 18rpx;
  .box {
    width: 140rpx;
    height: 140rpx;
    border-radius: 8rpx;
    background: #f5f8fc;
    margin-right: 16rpx;
    margin-bottom: 10rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    image {
      width: 140rpx;
      height: 140rpx;
    }
  }
}
.ywjs {
  /deep/ .u-form-item__body {
    flex-direction: column !important;
  }
}
.hyTetx {
  font-size: 28rpx;
  color: #606266;
  display: flex;
  justify-content: space-between;
  margin-top: 18rpx;
}
/deep/ .u-form-item__body__right__message {
  text-align: right !important;
}
.msgLeft {
  /deep/ .u-form-item__body__right__message {
    text-align: left !important;
  }
}
.ywjs {
  /deep/ .u-form-item__body__right__message {
    text-align: left !important;
    margin-left: 0 !important;
  }
}
</style>
